<template>
    <div :class="{'hidden':hidden}" class="pagination-container">
        <el-pagination
            :background="background"
            :current-page.sync="page"
            :page-size.sync="limit"
            :layout="layout"
            :page-sizes="pageSizes"
            :total="total"
            v-bind="$attrs"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
    import { scrollTo } from '@/utils/scroll-to'
    
    export default {
        name: 'Pagination',
        props: {
            total: {
                required: true,
                type: Number
            },
            currentPage: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10
            },
            pageSizes: {
                type: Array,
                default() {
                    return [5,10, 20, 30, 50]
                }
            },
            layout: {
                type: String,
                default: 'total, sizes, prev, pager, next, jumper'
            },
            background: {
                type: Boolean,
                default: true
            },
            autoScroll: {
                type: Boolean,
                default: true
            },
            hidden: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            page: {
                get() {
                    return this.currentPage
                },
                set(val) {
                    this.$emit('update:currentPage', val)
                }
            },
            limit: {
                get() {
                    return this.pageSize
                },
                set(val) {
                    this.$emit('update:pageSize', val)
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                this.$emit('pagination')
                if (this.autoScroll) {
                    scrollTo(0, 800)
                }
            },
            handleCurrentChange(val) {
                this.$emit('pagination')
                if (this.autoScroll) {
                    scrollTo(0, 800)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .pagination-container {
        background: #fff;
        padding: 16px 0;
        ::v-deep.el-select{
            width: 100px !important;
            .el-input {
                width: 100% !important;
            }
        }
        ::v-deep.el-pagination__jump {
            .el-input{
                width: 50px !important;
            }
        }
    }
    
    .pagination-container.hidden {
        display: none;
    }
    
</style>
